<template>
  <div class="box">
    <div class="title">
      <van-tabs
        v-model="info.active"
        @click="titleFn"
        sticky
        swipeable
        animated
        title-active-color="#D8B88C"
        color="#D8B88C"
        title-inactive-color="var(--textColor)"
        background="var(--backColor)"
      >
        <van-tab
          v-for="(item, index) in info.headers"
          :title="item.title"
          :key="index"
        >
          <div class="content">
            <van-pull-refresh
              v-model="isLoading"
              @refresh="onRefresh"
              success-text="刷新成功"
            >
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div
                  class="list"
                  v-for="(item, index) in info.list"
                  :key="index"
                  @click.stop="navToFn(item)"
                >
                  <img
                    :src="imgUrl + item.listImg"
                    width="100"
                    height="100"
                    alt=""
                  />
                  <div class="text">
                    <div class="listTitle">{{ item.name }}</div>
                    <div class="listNumber">{{ item.number }}</div>
                    <div class="moneyButton">
                      <div class="money">￥ {{ item.price }}</div>
                      <div class="button" v-if="info.active == 0">去支付</div>
                    </div>
                  </div>
                  <div class="remove" v-if="info.active == 0">
                    <van-icon name="cross" @click.stop="removeList(item)" />
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import publicFunction from "@/views/public/refresh";
import { getGoodsList, imgUrl, getProductCancel } from "@/api/http.js";

export default defineComponent({
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const info = reactive({
      headers: [
        {
          title: "待支付",
          type: 1,
        },
        {
          title: "审核中",
          type: 2,
        },
        {
          title: "已支付",
          type: 3,
        },
      ],
      active: 0,
      list: [],
      total: null,
      pageNum: 1,
      pageSize: 6,
    });
    const isLoading = ref(false); // 下拉刷新
    const loading = ref(false); // 上拉加载
    const finished = ref(false); // 上拉加载是否加载完毕
    // 引入上拉刷新/下拉加载函数
    const { publicRefresh, publicLoad } = publicFunction();

    // 下拉刷新
    const onRefresh = async () => {
      info.pageNum = 1;
      const params = {
        productStatus: info.active,
        pageSize: info.pageSize,
        pageNum: info.pageNum,
      };
      const refreshData = await publicRefresh(getGoodsList, params);
      if (refreshData.code != 200) return proxy.$toast.fail("请求失败");
      info.total = refreshData.data.total;
      info.list = refreshData.data.data;
      isLoading.value = false;
      finished.value = false;
      info.pageNum = 2;
    };

    // 上拉加载
    const onLoadBool = ref(false);
    const onLoad = async () => {
      if (onLoadBool.value) return;
      onLoadBool.value = true;
      const params = {
        productStatus: info.active,
        pageSize: info.pageSize,
        pageNum: info.pageNum,
      };
      const loadData = await publicLoad(getGoodsList, params);
      if (loadData.code === 500) {
        proxy.$toast.fail("登录过期，请重新登录");
        setTimeout(() => {
          router.push({
            path: "/login",
          });
        }, 2000);
        return;
      }
      if (loadData.code != 200) return proxy.$toast.fail("请求失败");
      info.total = loadData.data.total;
      onLoadBool.value = false;
      if (info.list.length >= info.total) return (finished.value = true);
      info.pageNum = info.pageNum + 1;
      info.list = info.list.concat(loadData.data.data);
    };

    const titleFn = (type) => {
      info.active = type;
      onRefresh();
    };

    const navToFn = (item) => {
      console.log("item---", item);
      router.push({
        name: "OrderDetails",
        query: {
          orderId: item.orderId,
        },
      });
    };

    const removeList = async (item) => {
      proxy.$dialog
        .confirm({
          title: "提示",
          message: "是否确认删除订单？？？",
        })
        .then(async () => {
          const data = await getProductCancel({ id: item.orderId });
          if (data.code != 200) return proxy.$toast.fail(data.msg);
          onRefresh();
          proxy.$toast.success(data.msg);
          console.log("删除---", item);
        })
        .catch(() => {
          // on cancel
        });
    };

    return {
      info,
      titleFn,
      isLoading,
      loading,
      finished,
      onRefresh,
      onLoad,
      removeList,
      navToFn,
      imgUrl,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);

  .title {
    .content {
      padding: 0 4%;

      .list {
        padding: 15px 15px;
        margin-top: 10px;
        background-color: var(--backColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: var(--textColor);

        position: relative;

        .text {
          width: 100%;
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;

          .listTitle {
            font-size: 0.95rem;
            display: -webkit-box;
            overflow: hidden;
            white-space: normal !important;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .listNumber {
            width: 100%;
            font-size: 0.8rem;
            margin-top: 8px;
            opacity: 0.8;
          }
          .moneyButton {
            width: 100%;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .money {
              color: #dd0000;
              font-size: 1rem;
              font-weight: 700;
            }
            .button {
              width: 80px;
              height: 30px;
              border: 1px solid var(--textColorTwo);
              color: var(--textColorTwo);
              text-align: center;
              line-height: 30px;
              border-radius: 30px;
              font-size: 0.8rem;
            }
          }
        }
        .remove {
          position: absolute;
          top: 5px;
          right: 5px;
        }
      }
    }
  }
}
</style>
